<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="article" :rules="rules" ref="article">
      <el-form-item label="文章名称" prop="title">
        <el-input v-model="article.title" placeholder="请输入文章名称"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="article.description" placeholder="请输入文章描述"></el-input>
      </el-form-item>
      <el-form-item label="封面图片" prop="img">
      </el-form-item>
      <el-form-item>
        <ImgClip style="cursor: pointer" :default-poster="imgUrl" @sendChangePoster="sendImgFun"/>
      </el-form-item>
      <el-form-item label="内容">
      </el-form-item>
      <el-form-item>
        <tinymce ref="content" v-model="article.content" style="min-width: 720px"/>
      </el-form-item>
      <div ref="t" style="width: 100%;display: flex;justify-content: center;flex-direction: row">
        <div>
          <el-button style="margin: 0 auto;width: fit-content" type="primary" @click.prevent.native="handle">提交
          </el-button>
          <el-button style="margin: 0 auto;width: fit-content" type="" @click.prevent.native="reset">刷新
          </el-button>
        </div>

      </div>
    </el-form>
  </el-card>
</template>

<script>
import {getArticle, updatedArticle} from '@/api/returnArticle'
import tinymce from "@/components/Tinymce"
import ImgClip from "@/components/ImgClip"
import {dataURItoBlob} from "@/utils"

const defaultArticle = {
  adminId: 0,
  title: '',
  content: '',
  description: '',
  img: '',
  id: 0
}
export default {
  name: "ArticleCateDetail",
  components: {
    ImgClip,
    tinymce
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      article: Object.assign({}, defaultArticle),

      rules: {
        title: [
          {required: true, message: '请输入文章名称', trigger: 'blur'},
          {min: 2, max: 140, message: '长度在2到140个字符', trigger: 'blur'}
        ]
      },
      imgUrl: '',
      sendFile: ''


      // toolbar:['undo redo | styleselect | bold italic | link image']
    }
  },
  methods: {
    sendImgFun(base64) {
      if (base64)
        this.sendFile = dataURItoBlob(base64.base64)
      this.fileName = base64.fileName
    },
    handle() {
      this.$refs.article.validate(valid => {
        if (valid) {
          // this.article.content = this.$refs.content.getContent()
          const formData = new FormData();
          if (this.sendFile) {
            formData.set("img", this.sendFile, this.fileName)
          }
          formData.set("title", this.article.title)
          formData.set("content", this.article.content)
          formData.set("description", this.article.description)
          formData.set("adminId", this.article.adminId)
          updatedArticle(this.article.id, formData).then((resp) => {
            if (resp) {
              this.$message({
                type: 'success',
                message: '更新成功!'
              });
            }
          })

        } else {
          console.log('参数不合法!')
          return false
        }
      })
    },
    reset() {
      location.reload()
    }

  },
  beforeMount() {
    const id = this.$route.query.id;
    getArticle(id).then(res => {
      const article = res.data;
      Object.assign(this.article, article);
    }).then(() => {
      if (this.article.img) {
        this.imgUrl = this.$store.getters.store + this.article.img;
      } else {
        this.imgUrl = this.$store.getters.store + "group1/M00/00/00/wKhwgWGGvECAECwcAAAPAKGg43M801.png";
      }
    })
    //.then(() => {
      // setTimeout(() => {
      //   this.$refs.content.setContent(this.article.content)
      // }, 222)
    //}) //改为双向绑定

  }

}
</script>

<style scoped>
.form-container {
  width: 80%;
  left: 180px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 300px;
  height: 181px;
  display: block;
}
</style>
